<template>
<div class="breadcrumb-div">
  <div class="breadcrumb">
    <el-breadcrumb separator="/">
        <transition-group>
            <el-breadcrumb-item  v-for="item in levelList" :key="item.path">
              <router-link style="text-decoration: none;color:#000;" :to="item.path">{{item.title}}</router-link>
            </el-breadcrumb-item>
        </transition-group>
    </el-breadcrumb>
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      levelList: [],
      ifmodel: false
    };
  },
  watch: {
    beforeRouteEnter(to, from, next) {
        next(vm=>{
            vm.route1 = to.meta.route1;
        })
    },
    $route() {
      this.getBreadcrumb();
    }
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    }
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      this.levelList = this.$route.meta.route1;
      if (this.levelList.length === 2) {
          this.ifmodel = true;
      } else {
          this.ifmodel = false;
      }
    }
  }
};
</script>
<style scoped>
.breadcrumb-div {
  padding: 0 16px;
  height: 36px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
}
</style>
